<template>
	<view>
		<view class="flex_between my_tab" v-if="!type">
			<view class="my_tab_it" @click="changeType(item.id)" :class="{'my_tab_it_ac':item.id==tabCur}"
				v-for="item in tab">{{item.name}}</view>
		</view>
		<view class="my_content" :class="{'my_content2':type=='self'}">
			<view class="my_search flex_between">
				<input type="text" v-model="keywords" class="flex1" placeholder="请输入商品名称">
				<view class="search flex_center" @click="search">
					<view>搜索</view>
					<image src="/static/search.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="my_list">
				<view class="my_it" v-for="(item,idx) in list">
					<view class="flex_between goods"
						@click="$navTo('/pages/product/product?goodsid='+item.goodsid+'&parkId='+item.park_id)">
						<image :src="item.thumb"></image>
						<view class="goods_info">
							<view class="clamp2">{{item.goods_name}}</view>
							<view class="g_price"><text>￥</text>{{item.group_price}}</view>
						</view>
					</view>
					<view class="my_t flex_between">
						<view>参团人数：<text>该商品累计参团 {{item.member_list.length}} 人</text></view>
						<view class="my_status" :class="{'my_status2':item.status==2,'my_status3':item.status==3}">
							{{item.group_status_str}}</view>
					</view>
					<view class="people_list flex_align_center" :class="{'people_list2':item.openStatus}">
						<view class="peo_it" :class="{'peo_logo_ac':it.membership==1,'peo_logo_ac2':it.status==2}"
							v-for="it in item.member_list">
							<view class="peo_logo">
								<image :src="it.avatar"></image>
							</view>
							<view class="pep_sta" v-if="it.membership==1">发起人</view>
							<view class="pep_sta" v-if="it.status==2">中奖用户</view>
							<view class="clamp">{{it.nickname}}</view>
						</view>
						<view class="peo_it" @click="joinSumbit(item)" v-if="item.status==1">
							<view class="peo_logo">
								<image src="/static/my/add.png"></image>
							</view>
							<view class="clamp">邀请组队</view>
						</view>
					</view>
					<block v-if="item.member_list.length>=14">
						<view class="open flex_center" v-if="!item.openStatus" @click="changeOpen(idx,true)">
							<view class="line"></view>
							<view class="open_tit">展开</view>
							<image src="/static/my/down.png"></image>
							<view class="line"></view>
						</view>
						<view class="open flex_center" v-else @click="changeOpen(idx,false)">
							<view class="line"></view>
							<view class="open_tit">收起</view>
							<image src="/static/my/down.png" class="open2"></image>
							<view class="line"></view>
						</view>
					</block>
					<view class="order_status" v-if="!item.button_info.jump_order_id">{{item.button_info.button_str}}
					</view>
					<view class="order_status" v-else
						@click="$navTo('/pages/order/detailsx?id='+item.button_info.jump_order_id)">
						{{item.button_info.button_str}}</view>
				</view>
				<view class="empty_loading2">
					<image v-if="isloading" src="/static/loading.gif"></image>
					<view v-if="isempty">———— <text>没有更多了</text> ————</view>
				</view>
			</view>
		</view>
		<shareMenu ref="shareMenu" />
		<bar ref="bar"></bar>
	</view>
</template>

<script>
	import bar from './components/bar.vue';
	export default {
		components: {
			bar
		},
		data() {
			return {
				tab: [{
						id: 0,
						name: '全部拼团'
					},
					{
						id: 1,
						name: '正在拼团'
					},
					{
						id: 2,
						name: '拼团成功'
					},
					{
						id: 3,
						name: '拼团失败'
					},
					{
						id: 4,
						name: '拼团中奖'
					},
				],
				tabCur: 0,
				isloading: false,
				isempty: false,
				list: [],
				page: 0,
				keywords: '',
				shareInfo: {
					title: '消费享补贴，就用多米街',
					path: '/pages/index/home',
					imageUrl: ''
				},
				type: ''
			};
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type;
				this.tabCur = 5;
			}
			this.getList();
		},
		onShow(){
			this.$refs.bar.initCurrentIndex()
		},
		onReachBottom() {
			this.getList();
		},
		onShow() {
			this.$refs.bar.initCurrentIndex()
		},
		async onShareAppMessage() {
			return {
				title: this.shareInfo.title,
				path: this.shareInfo.url,
				imageUrl: this.shareInfo.imgurl
			}
		},
		methods: {
			async joinSumbit(e) {
				uni.showLoading({
					title: '请稍候'
				})
				let title = '消费享补贴，就用多米街';
				if (e.pintuan_list_detail_info && e.pintuan_list_detail_info[0] && e.pintuan_list_detail_info[0]
					.member_info) {
					title = `${e.pintuan_list_detail_info[0].member_info.nickname} 发起${e.pintuan_card_info.name}`
				} else if (e.pintuan_card_info && e.pintuan_card_info.name) {
					title = e.pintuan_card_info.name
				}
				if (e) {
					this.$axios('WxInfo/getConfig', 'POST', 'shop', {
						url: '/pages/pintuan/product?pintuan_list_id=' + e.id + '&goodsid=' + e.goodsid,
					}).then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							this.shareInfo = {
								title: title,
								imgurl: e.pintuan_card_info.img,
								url: res.data.data.shareinfo.url
							}
							this.$refs.shareMenu.open(e)
						}
					})
				}
			},
			search() {
				this.page = 0;
				this.list = [];
				this.getList();
			},
			changeType(id) {
				if (id == this.tabCur) return;
				this.tabCur = id;
				this.page = 0;
				this.list = [];
				this.getList();
			},
			getList() {
				this.page++;
				this.isloading = true;
				this.isempty = false;
				const typeIdx = this.tabCur;
				this.$axios('UserCenter/all_lst', 'POST', 'group_buy', {
					page: this.page,
					tab_flag: this.tabCur,
					goods_name: this.keywords
				}).then(res => {
					this.isloading = false;
					if (typeIdx != this.tabCur) {
						return;
					}
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data.list];
						this.isempty = res.data.data.list.length <= 0;
					}
				})
			},
			changeOpen(idx, status) {
				this.list[idx].openStatus = status;
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fdf8ff;
	}

	.native-share-btn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
		background: red;
		z-index: 1;
	}

	.my_tab {
		background: #fff;
		padding: 20rpx;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;

		.my_tab_it {
			color: #13001E;
			font-weight: bold;
			font-size: 28rpx;
		}

		.my_tab_it_ac {
			position: relative;

			&::before {
				content: "";
				display: block;
				width: 96rpx;
				height: 12rpx;
				background: #8813E2;
				opacity: .8;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
			}
		}
	}

	.my_content {
		padding: 20rpx;
		padding-top: 100rpx;
	}

	.my_content2 {
		padding-top: 0;
	}

	.my_search {
		input {
			border: 2rpx solid #CCCACD;
			background: #FFFFFF;
			border-radius: 16rpx;
			height: 64rpx;
			padding: 0 20rpx;
		}
	}

	.search {
		background: #9A1FE8;
		width: 160rpx;
		height: 64rpx;
		border-radius: 16rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-left: 16rpx;

		image {
			width: 36rpx;
			margin-left: 6rpx;
		}
	}

	.my_list {
		padding: 20rpx 0 60rpx;

		.my_it {
			background: #fff;
			border-radius: 24rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.my_t {
				color: #5B5B5B;

				text {
					color: #13001E;
				}

				.my_status {
					background: rgba(154, 31, 232, 0.15);
					line-height: 34rpx;
					width: 92rpx;
					border-radius: 8rpx;
					color: #9A1FE8;
					font-size: 20rpx;
					text-align: center;
				}

				.my_status2 {
					background: rgba(7, 193, 96, 0.15);
					color: #07C160;
				}

				.my_status3 {
					background: rgba(153, 153, 153, 0.15);
					color: #999999;
				}
			}

			.goods {
				padding: 0 0 20rpx;
				border-bottom: 2rpx dashed #eee;
				margin-bottom: 20rpx;

				image {
					width: 144rpx;
					height: 144rpx;
					border-radius: 8rpx;
					flex-shrink: 0;
				}

				.goods_info {
					flex: 1;
					color: #13001E;
					padding-left: 20rpx;

					.g_price {
						font-weight: bold;
						font-size: 32rpx;
						color: #9A1FE8;
						text-align: right;
						margin-top: 28rpx;

						text {
							font-weight: normal;
							font-size: 24rpx;
						}
					}
				}
			}

			.people_list {
				flex-wrap: wrap;
				margin: 10rpx -20rpx 0;
				max-height: 250rpx;
				padding: 20rpx 0;
				overflow: hidden;
				position: relative;

				.peo_it {
					width: calc(100% / 7);
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 20rpx;
					padding: 0 10rpx;

					.peo_logo {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						border: 4rpx solid transparent;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.clamp {
						width: 100%;
						color: #13001E;
						font-size: 20rpx;
						margin-top: 8rpx;
					}
				}

				.peo_logo_ac {
					position: relative;

					.peo_logo {
						border: 4rpx solid #9A1FE8;
					}

					.pep_sta {
						background: #9A1FE8;
						line-height: 24rpx;
						border-radius: 8rpx;
						padding: 0 6rpx;
						color: #FFFFFF;
						font-size: 14rpx;
						font-weight: bold;
						position: absolute;
						top: -10rpx;
					}
				}

				.peo_logo_ac2 {
					position: relative;

					.peo_logo {
						border: 4rpx solid #07C160;
					}

					.pep_sta {
						line-height: 24rpx;
						border-radius: 8rpx;
						padding: 0 6rpx;
						color: #FFFFFF;
						font-size: 14rpx;
						font-weight: bold;
						position: absolute;
						top: -10rpx;
						background: #07C160;
					}
				}
			}

			.people_list2 {
				height: auto;
				max-height: 2000rpx;
			}

			.open {
				margin-top: 10rpx;

				.line {
					flex: 1;
					border-bottom: 2rpx dashed #eee;
				}

				.open_tit {
					margin-left: 20rpx;
					color: #999999;
				}

				image {
					width: 34rpx;
					height: 18rpx;
					margin-left: 16rpx;
					margin-right: 20rpx;
				}

				.open2 {
					transform: rotateZ(-180deg);
				}
			}

			.order_status {
				background: #9A1FE8;
				line-height: 72rpx;
				width: 100%;
				border-radius: 144rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				font-weight: bold;
				text-align: center;
				margin: 24rpx 0 10rpx;
			}
		}
	}
</style>